<template>
  <div>
    <v-app-bar app flat>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="toggleDrawer" />

      <v-container class="mx-auto py-0">
        <v-row align="center">
          <v-img
            :src="require('@/assets/logo.png')"
            class="mr-5 hidden-sm-and-down"
            contain
            height="48"
            width="48"
            max-width="48"
            @click="$vuetify.goTo(0)"
          />

          <v-btn
            v-for="(link, i) in links"
            :key="i"
            v-bind="link"
            class="hidden-sm-and-down"
            text
            :to="link.href"
          >
            {{ link.text }}
          </v-btn>

          <v-spacer />

          <v-text-field
            placeholder="搜索..."
            append-icon="mdi-magnify"
            flat
            rounded
            single-line
            filled
            dense
            hide-details
            style="max-width: 300px"
          />
          <v-spacer />
          <v-menu
            class="hidden-sm-and-down"
            v-if="auth.user"
            open-on-hover
            offset-y
          >
            <template v-slot:activator="{ on }">
              <v-btn v-on="on" text class="hidden-sm-and-down">{{
                '您好：' + auth.user.username
              }}</v-btn>
            </template>
            <user-menulist></user-menulist>
          </v-menu>
          <v-btn
            v-else
            class="hidden-sm-and-down"
            text
            @click="isShowLoginForm = true"
            >登录/注册</v-btn
          >
          <v-spacer />
          <v-switch
            v-model="theTheme"
            hide-details
            class="hidden-sm-and-down"
            @click="changTheme"
          ></v-switch>
        </v-row>
      </v-container>
    </v-app-bar>

    <login-dlg
      :isShowLoginForm="isShowLoginForm"
      @changLoginShow="toggleLoginDlg($event)"
    ></login-dlg>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'CoreAppBar',

  components: {
    LoginDlg: () => import('@/components/user/LoginDlg'),
    UserMenulist: () => import('@/components/user/UserMenulist'),
  },

  data() {
    return {
      isShowLoginForm: false,
      theTheme: false
    }
  },

  computed: {
    ...mapState(['auth', 'isdark']),
    ...mapGetters(['links']),
  },

  created(){
    this.setTheme()
  },

  methods: {
    ...mapMutations(['toggleDrawer']),
    toggleLoginDlg(msg) {
      this.isShowLoginForm = msg
    },
     setTheme(){
      this.theTheme = this.isdark
      this.$vuetify.theme.dark = this.isdark
    },
    changTheme(){
      const cookie = process.browser ? require('js-cookie') : undefined
      this.$store.commit('setTheme',this.theTheme)
      cookie.set('isdark', this.theTheme)
      this.$vuetify.theme.dark = this.isdark
    }
  },
}
</script>
